<script setup>
import { onMounted, ref } from "vue";
import moment from "moment";
import "moment/locale/zh-cn";
import VersionDialog from "./versionDialog.vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";

moment.locale("zh-cn");
const router = useRouter();
const useStore = useUserStore();
const props = defineProps(["title"]);
const user = ref("");
let screen = ref();
onMounted(() => {
  updateDateTime();
  setInterval(updateDateTime, 1000);
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  user.value = JSON.parse(localStorage.getItem("user"));
});
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
// 监听容器大小
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};

const currentDateTime = ref(moment().format("YYYY年MM月DD日 HH:mm:ss"));

function updateDateTime() {
  const now = moment();
  currentDateTime.value = now.format("YYYY/MM/DD HH:mm:ss");
}

function goBack() {
  router.go(-1);
}

const visible = ref(false);
const versionData = ref([
  {
    noticeTitle: "v3.1",
    createTime: "2025/03/26",
    noticeContent: [
      "1.优化及修改设计版面",
      "2.新增“重庆市普通高校招生报名信息”版块及下钻弹窗",
      "3.优化“渝小育”AI助手面板及完善教育统计智能体",
      "4.根据教育“一表通”数据呈现全市在校生数、健康服务",
    ],
  },
  {
    noticeTitle: "v3.0",
    createTime: "2025/02/17",
    noticeContent: [
      " 1.新增协同处置版块，展示事件详情以及协同调度",
      "2.新增“渝小育”AI智能问答版块",
    ],
  },
  {
    noticeTitle: "v2.0",
    createTime: "2024/12/12",
    noticeContent: [
      "1.重新设计版面",
      "2.新增绩效考核指标(KPI)规划能力",
      "3.学生基础概况单独展示",
      "4.入学服务接入江北区实景图系统",
      "5.培养服务新增德育教育、实践教育、美育教育",
      "6.健康服务接入渝中区心理健康系统",
      "7.权益服务接入社会服务",
    ],
  },
  {
    noticeTitle: "v1.0",
    createTime: "2024/3/20",
    noticeContent: [
      "1.根据惠学生一级业务展示呈现入学服务相关指标及数据",
      "2.根据惠学生一级业务展示呈现培养服务相关指标及数据",
      "3.根据惠学生一级业务展示呈现健康服务相关指标及数据",
      "4.根据惠学生一级业务展示呈现权益服务相关指标及数据",
      "5.根据惠学生一级业务展示呈现毕业服务相关指标及数据",
    ],
  },
]);
</script>
<template>
  <div class="container_max">
    <div class="screen" ref="screen">
      <div class="header">
        <div class="header_c">
          <div class="time">
            {{ currentDateTime }}
            <div class="quxian"><span class="quxian_nr">{{ useStore.switchAddress||'市级' }}</span></div>
          </div>
          <div class="title">
            {{ title }}
          </div>
          <div class="version" @click="visible = true">V3.1</div>

          <div
            class="user"
            ref="dropdown"
            @mouseover="keepDropdownOpen"
            @mouseleave="handle"
          >
            <img src="../assets/images/userIcon.png" class="user_icon" />
            <div class="text-4b-65-14 mr-1">{{ user?.userName }}</div>
            <!-- <img src="../assets/images/downArrow.png" class="user_arrow" /> -->
            <div class="back" @click="goBack"></div>
          </div>
        </div>
        <VersionDialog
          :visible="visible"
          title="版本历史记录"
          :data="versionData"
          @close="visible = false"
        >
        </VersionDialog>
      </div>
      <div class="main">
        <div class="ct_c">
          <slot name="left"></slot>
        </div>
        <div class="ct_cc">
          <slot name="center"></slot>
        </div>

        <div class="ct_c">
          <slot name="right"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container_max {
  width: 100vw;
  height: 100vh;
}
.screen {
  position: fixed;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: left top;
}
.header {
  width: 100%;
  height: 5.625rem;
  background: url("@/assets/images/head.png") no-repeat;
  background-size: 100% 100%;

  .header_c {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .time {
      height: 100%;
      position: absolute;
      left: 0;
      font-size: 1rem;
      font-family: "Helvetica-Bold";
      color: #c9e9f8;
      font-weight: bold;
      display: flex;
      align-items: center;
      .quxian {
        // width: 180px;
        height: 40px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        background: url("@/assets/images/qx_adr.png") no-repeat;
        background-size: cover;
        .quxian_nr {
          font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
          font-weight: normal;
          font-size: 22px;
          line-height: 22px;
          letter-spacing: 1px;
          text-align: left;
          background-image: linear-gradient(#ffffff 0%, #32D980 100%);
          background-clip: text;
          color: transparent;
        }
      }
    }

    .title {
      font-size: 2.5rem;
      font-weight: 600;
      background-image: linear-gradient(#ffffff 0%, #c3d4f6 100%);
      background-clip: text;
      color: transparent;
    }
    .version {
      position: absolute;
      top: 23%;
      right: 40%;
      font-size: 1.5rem;
      font-weight: 600;
      background-image: linear-gradient(#ffffff 0%, #c3d4f6 100%);
      background-clip: text;
      color: transparent;
      cursor: pointer;
      &:hover {
        color: #4bfff5;
      }
    }

    .user {
      height: 100%;
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      // cursor: pointer;
      .user_icon {
        width: 1.5rem;
        height: 1.5rem;
      }
      .user_arrow {
        width: 0.75rem;
        height: 0.75rem;
      }
      .back {
        width: 80px;
        height: 36px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("@/assets/images/goBack.png") no-repeat;
        background-size: 100% 100%;
        color: #29e693;
        &:hover {
          cursor: pointer;
          background: url("@/assets/images/goBackHover.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.main {
  display: flex;
  width: 100%;
  height: calc(100% - 6.25rem);
  gap: 1.25rem;
  justify-content: space-between;
  padding: 1px 0 5px;
  .ct_c {
    width: 26.5%;
    height: 100%;
    background: rgba(28, 82, 133, 0.2);
    border: 1px dashed #3196ca;
  }
  .ct_cc {
    width: 47%;
    height: 100%;
  }
}
</style>
